<template>
  <el-dialog v-model="dialogVisible" :title="title" width="600" :before-close="handleClose">
    <el-form
      ref="ruleFormRef"
      style="max-width: 400px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item :label="`${$t('mall.recipient_name')}:`" prop="name">
        <el-input v-model="ruleForm.name" :placeholder="`${$t('mall.enter_recipient_name')}`" />
      </el-form-item>
      <el-form-item :label="`${$t('mall.mobile_number')}:`" prop="phone">
        <el-input v-model="ruleForm.phone" :placeholder="`${$t('mall.enter_mobile_number')}`" />
      </el-form-item>
      <el-form-item :label="`${$t('mall.region')}:`" prop="region">
        <el-cascader :props="props" v-model="ruleForm.region" style="width: 318px" />
      </el-form-item>
      <el-form-item :label="`${$t('mall.shipping_address')}:`" prop="receivingAddress">
        <el-input
          v-model="ruleForm.receivingAddress"
          :placeholder="$t('mall.detailed_address_info')"
        />
      </el-form-item>
      <el-form-item :label="`${$t('mall.postal_code')}:`" prop="code">
        <el-input v-model="ruleForm.code" :placeholder="$t('mall.enter_postal_code')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('smt.Cancel') }}</el-button>
        <el-button type="primary" @click="saveAddress(ruleFormRef)">
          {{ $t('om.Save') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { provincesCitiesAndDistricts } from '@/server/api/biz.js';
defineProps({
  dialogVisible: Boolean,
  title: String,
});

const ruleFormRef = ref(null);
const ruleForm = reactive({});
const regionForm = reactive({
  level: '1',
  parentCode: '0',
  parentId: '0',
});

const handleClose = () => {};

const initProvincesCitiesAndDistricts = async () => {
  const res = await provincesCitiesAndDistricts(regionForm);
  console.log(res, '获取数据');
};

onMounted(() => {
  initProvincesCitiesAndDistricts();
});
</script>

<style scoped lang="scss"></style>
